<template>
    <div>
        <canvas class="canvas01" width="500" height="500"></canvas>
    </div>
</template>

<script>
    /*eslint-disable*/

    function pointRotate(center, p1, angle) {
        let x1 = (p1.x - center.x) * Math.cos(angle) + (p1.y - center.y) * Math.sin(angle) + center.x;
        let y1 = -(p1.x - center.x) * Math.sin(angle) + (p1.y - center.y) * Math.cos(angle) + center.y;
        return [x1, y1];
    }

    export default {
        name: 'canvas-01',
        async mounted() {
            await this.$nextTick()
            const canvas = document.querySelector('.canvas01')
            const context = canvas.getContext('2d');
            const originPoint = {x: 150, y: 100};
            context.lineWidth = 2
            context.strokeStyle = '#FF0000'
            context.beginPath()
            context.moveTo(100, 100)
            context.lineTo(originPoint.x, originPoint.y)
            context.stroke()

            context.beginPath()
            const targetPoint = {x: 200, y: 100};
            context.strokeStyle = '#333'
            context.moveTo(originPoint.x, originPoint.y)
            context.lineTo(targetPoint.x, targetPoint.y)
            context.stroke()

            context.beginPath()
            context.strokeStyle = '#2D8CF0'
            context.moveTo(originPoint.x, originPoint.y)
            // angle 角度 , 正数：逆时针 负数：顺时针
            const [x, y] = pointRotate(originPoint, targetPoint, -45 * Math.PI / 180)
            context.lineTo(x, y)
            context.stroke()


        }
    };
</script>

<style lang="less" scoped>
    .canvas01 {
        border: 1px solid red;
    }
</style>
